<template>
  <div>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="userList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-once
      >
        <el-table-column type="selection" />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="名称" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="clickDetail(scope.row)" type="primary" size="small" icon="el-icon-view">查看</el-button>
            <el-button @click="clickEdit(scope.row)" type="warning" size="small" icon="el-icon-edit-outline">编辑</el-button>
            <el-button @click="clickDelete([scope.row])" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>

export default {
  name: "UserList",
  methods:{
      handleSelectionChange(val) {
        this.getChosedUserList(val)
      }
  },
  computed:{
    pageInfo(){
          return {
            p: parseInt(this.$route.query.p) || 1,
            size: parseInt(this.$route.query.size) || 5
          }
    },
    userList(){
      console.log(this.pageInfo)
        let L = (this.pageInfo.p - 1) * this.pageInfo.size
        let R = L + this.pageInfo.size
        return this.$store.state.user.userList.slice(L, R)
    },
  },
  props: ['clickDetail', 'clickEdit', 'clickDelete', 'getChosedUserList']
};
</script>

<style>
</style>